code:
<img src="../pics/car2.jpg" style="width:100%;">
revision:
Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices (desktops, tablets, and phones).
To create a responsive website, add the following <meta> tag to all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
Responsive images are images that scale nicely to fit any browser size.
using the width property: if the "CSS width property" is set to 100%, the image will be responsive and scale up and down.
examples
<img src="../pics/car2.jpg" style="width:100%;">
A better solution, in many cases, will be to use the max-width property. If the "max-width property" is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.
examples
<img src="../pics/car2.jpg" style="max-width:100%; height:auto;">
examples
<picture>
<source srcset="../pics/img_smallflower.jpg" media=
"(max-width: 600px)">
<source srcset="../pics/img_flowers.jpg" media=
"(max-width: 1500px)">
<source srcset="../pics/flowers.jpg">
<img src="../pics/img_flowers.jpg" alt="Flowers"
style="width:auto;">
</picture>
The text size can be set with a "vw" unit, which means the "viewport width". That way the text size will follow the size of the browser window:
examples
Resize the browser window to see how the text size scales.
Use the "vw" unit when sizing the text. 2vw will set the size to 2% of the viewport width.
<div>
<h4 style="margin-left:4vw; font-size:4vw;">Responsive Text</h4>
<p class="spec" style="margin-left: 4vw; font-size:3vw;">Resize the browser
window to see how the text size scales.</p>
<p class="spec" style="margin-left:4vw; font-size:2vw;">Use the "vw" unit
when sizing the text. 2vw will set the size to 2% of the viewport width.</p>
</div>
In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.
examples
If the screen size is less than 800px, then this section will show lightblue color. Otherwise it will show a pink color.
<section>
the color of this section will change in function of the screen size.
</section>
<style>
section{margin-left:5vw; width: 40vw; height: 10vw; background:pink; border:
0.2vw dashed orange;}
@media screen and (max-width: 800px) {
section{background-color: lightblue;}
}
</style>
Mobile-first approach : start designing for the smallest screens and progressively enhance for larger devices. This ensures better performance and user experience.
Fluid layouts : use relative units instead of fixed pixels: "percentages (%)" for widths; "rem/em" for typography and spacing; "vw/vh" for viewport-based sizing; "fr" for flexible grid tracks
Flexible media : Images and videos should scale within their containers without breaking the layout.
Step 1: essential HTML setup : the viewport meta tag is essential for proper scaling on mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Content here -->
</body>
</html>
Step 2: CSS foundation
/* Base styles - mobile first */
* {box-sizing: border-box; margin: 0; padding: 0;}
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333;}
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px;}
/* Fluid typography */
h1 {font-size: clamp(1.5rem, 5vw, 2.5rem);}
p {font-size: clamp(1rem, 2vw, 1.2rem);}
Step 3: Flexible grid system
/* CSS Grid Layout */
.grid { display: grid; grid-template-columns: 1fr; gap: 20px;}
/* Tablet and up */
@media (min-width: 768px) {
.grid {grid-template-columns: repeat(2, 1fr); }
}
/* Desktop and up */
@media (min-width: 1024px) {
.grid {grid-template-columns: repeat(3, 1fr);}
}
/* Flexible Box Layout */
.flex-container {display: flex; flex-direction: column;gap: 20px;}
@media (min-width: 768px) {
.flex-container {flex-direction: row; flex-wrap: wrap;}
}
Step 4: Responsive images
img { max-width: 100%; height: auto; display: block;}
/* Responsive images with srcset */
<img
src="image-small.jpg"
srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px"
alt="Description">
Step 5: Media queries strategy
/* Common breakpoints (adjust based on content) */
@media (min-width: 576px) { /* Small tablets */ }
@media (min-width: 768px) { /* Tablets */ }
@media (min-width: 992px) { /* Desktops */ }
@media (min-width: 1200px) { /* Large desktops */ }
@media (min-width: 1400px) { /* Extra large */ }
/* Example: Navigation */
.nav { flex-direction: column;}
@media (min-width: 768px) {
.nav {flex-direction: row; justify-content: space-between; }
}
CSS grid with auto-fit
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;}
Container queries (modern approach)
.card-container {container-type: inline-size;}
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr;}
}
Responsive navigation
* Hamburger menu for mobile */
.nav-toggle { display: block; }
.nav-menu { display: none;}
@media (min-width: 768px) {
.nav-toggle {display: none; }
.nav-menu {display: flex;}
}